<!doctype html>
<html>
  <head>
    <title>Two.js: Clipping Mask</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="image_src" href="../images/logo.gif" />
    <link rel="shortcut icon" type="image/gif" href="../images/favicon.gif">
    <script src="../third-party/url.js"></script>
    <script src="../third-party/jquery.js"></script>
    <script src="../third-party/underscore.js"></script>
    <script src="../third-party/two.js"></script>
  </head>
  <body>
    <div class="scripts">
      <script>

        $(function() {

          var colors = [
            'rgb(0, 191, 168)',
            'rgb(153, 102, 255)',
            'rgb(255, 100, 100)',
            'rgb(0, 200, 255)'
          ];

          var type = /(canvas|webgl)/.test(url.type) ? url.type : 'svg';
          var two = new Two({
            type: Two.Types[type],
            fullscreen: true,
            autostart: true
          }).appendTo(document.body);

          var background = two.makeRectangle(two.width / 2, two.height / 2, two.width, two.height);
          background.noStroke();
          background.fill = 'rgb(255, 255, 175)';
          background.name = 'background';

          var container = two.makeGroup(background);

          var rows = Math.floor(two.height / 100);
          var cols = Math.floor(two.width / 100);
          var width = Math.round(two.height / Math.max(rows, cols));

          for (var i = 0; i < rows; i++) {

            var even = !!(i % 2);
            var vi = i / (rows - 1);

            for (var j = 0; j < cols; j++) {

              var k = j;

              if (even) {
                k += 0.5;
                if (j >=  cols - 1) {
                  continue;
                }
              }

              var hi = k / (cols - 1);

              var color = colors[Math.floor(Math.random() * colors.length)];

              var shape;
              if (j % 2 === 1) {
                shape = makeSquiggle(width, width / 3, Math.floor(Math.random() * 3) + 3, two);
                shape.noFill();
                shape.stroke = color;
                shape.linewidth = 4;
                shape.cap = 'round';
              } else {
                shape = new Two.Polygon(0, 0, width / 2, Math.floor(Math.random() * 3) + 3);
                shape.noStroke();
                shape.fill = color;
              }

              shape.rotation = Math.floor(Math.random() * 4) * Math.PI / 2 + Math.PI / 4;
              shape.translation.set(hi * two.width, vi * two.height);

              shape.step = (Math.floor(Math.random() * 8) / 8) * Math.PI / 60;
              shape.step *= Math.random() > 0.5 ? - 1 : 1;

              container.add(shape);

            }

          }

          var cursor = two.makeCircle(0, 0, Math.min(two.height, two.width) / 3);
          cursor.outline = two.makeCircle(0, 0, Math.min(two.height, two.width) / 3);
          cursor.target = new Two.Vector();

          cursor.outline.noFill();
          cursor.outline.stroke = 'rgba(0, 100, 255, 0.1)';
          cursor.outline.linewidth = 40;

          container.mask = cursor;
          cursor.target.set(two.width / 2, two.height / 2);
          cursor.translation.copy(cursor.target);

          var center = _.debounce(function() {
            cursor.target.set(two.width / 2, two.height / 2);
          }, 1000);

          var drag = function(e) {
            cursor.target.set(e.clientX, e.clientY);
            center();
          };

          var touchDrag = function(e) {
            e.preventDefault();
            var touch = e.originalEvent.changedTouches[0];
            drag({
              clientX: touch.pageX,
              clientY: touch.pageY
            });
            return false;
          };

          $(window)
            .bind('mousemove', drag)
            .bind('touchmove', touchDrag);

          two.bind('update', function() {

            cursor.translation.x += (cursor.target.x - cursor.translation.x) * 0.125;
            cursor.translation.y += (cursor.target.y - cursor.translation.y) * 0.125;
            cursor.outline.translation.copy(cursor.translation);

            for (var k in container.children) {
              var child = container.children[k];
              if (child.name === 'background') {
                continue;
              }
              child.rotation += child.step;
            }

          });

        });

        var makeSquiggle = function(width, height, phi, two) {

          var amt = 64;
          var anchors = [];
          for (var i = 0; i < amt; i++) {
            var pct = i / (amt - 1);
              var theta = pct * Math.PI * 2 * phi + Math.PI / 2;
              var x = width * pct - width / 2;
              var y = height / 2 * Math.sin(theta);
              anchors.push(new Two.Anchor(x, y));
          }

          return two.makeCurve(anchors, true);

        };

      </script>
    </div>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-40550435-1', 'github.com');
      ga('send', 'pageview');

    </script>
  </body>
</html>
